{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}

{% block header_tail %}
<link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
<link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
<script src="{% static 'plugins/vue1/vue.js' %}"></script>
{% endblock header_tail %}

{% block section_content %}
<div class="box-header with-border">
    <h3 class="box-title">可视化配置（公测）</h3>
</div>
<div class="row">
    <form role="form">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">任务ID：<span>{{ tid }}</span></h3>
                    <div class="box-tools pull-right">
                    </div>
                </div>
                <div class="box-body">
                    <!--基本信息填写--start-->
                    <div class="form-group" name="config_info">
                        <div class="col-sm-1 col-sm-1 control-label">网站类型</div>
                        <div class="col-sm-1">
                            <select class="control-form input-sm m-b-2" name="info_flag_select"
                                    id="info_flag_select">
                                <option value="01">新闻</option>
                                <option value="02">论坛</option>
                                <option value="05">平煤</option>
                            </select>
                        </div>
                        <div class="col-sm-1 col-sm-1 control-label">网站名称</div>
                        <div class="col-sm-2">
                            <input type="text" placeholder="值" class="form-control" name="site_name_value"
                                   value="{{ site_name }}">
                        </div>
                        <div class="col-sm-1 col-sm-1 control-label">网站域名</div>
                        <div class="col-sm-2">
                            <input type="text" placeholder="值" class="form-control" name="site_domain_value"
                                   value="{{ domain }}">
                        </div>
                        <div class="col-sm-1 col-sm-1 control-label">网站编码</div>
                        <div class="col-sm-2">
                            <input type="text" placeholder="网站编码" class="form-control" name="encoding_value"
                                   value="">
                        </div>
                    </div>
                    <!--基本信息填写--end-->
                    <div class="form-group" name="testURL">
                        <div class="col-sm-1 col-sm-1 control-label">测试链接</div>
                        <div class="col-sm-10">
                            <input type="text" placeholder="详情页链接" class="form-control" name="testURL_value"
                                   value="{{ test_detail_url }}">
                        </div>
                    </div>
                    <div class="form-group  panel panel-success" id="parse">
                        <div class="panel-heading">
                            <h3 class="panel-title">详情页解析规则</h3>
                        </div>
                        <div class="panel-body">
                            <div class="form-group">
                                <div class="col-sm-1 control-label">频道</div>
                                <div class="col-sm-1">
                                    <select class="control-form input-sm m-b-2" name="channel_select"
                                            id="channel_select">
                                        <option value="xpath">xpath</option>
                                        <option value="regex">re</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="表达式" class="form-control"
                                           name="channel_value" id="channel_value">
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="正则表达式" class="form-control"
                                           name="channel_re" id="channel_re">
                                </div>
                                <div class="col-sm-3">
                                    <button type="button" class="btn btn-primary" onclick="TestProcess('channel')">
                                        测试加工
                                    </button>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-1 control-label">标题</div>
                                <div class="col-sm-1">
                                    <select class="control-form input-sm m-b-2" name="title_select"
                                            id="title_select">
                                        <option value="xpath">xpath</option>
                                        <option value="regex">re</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="表达式" class="form-control"
                                           name="title_value" id="title_value">
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="正则表达式" class="form-control"
                                           name="title_re" id="title_re">
                                </div>
                                <div class="col-sm-3">
                                    <button type="button" class="btn btn-primary" onclick="TestProcess('title')">
                                        测试加工
                                    </button>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-1 control-label">作者</div>
                                <div class="col-sm-1">
                                    <select class="control-form input-sm m-b-2" name="source_select"
                                            id="source_select">
                                        <option value="xpath">xpath</option>
                                        <option value="regex">re</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="表达式" class="form-control"
                                           name="source_value" id="source_value">
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="正则表达式" class="form-control"
                                           name="source_re" id="source_re">
                                </div>
                                <div class="col-sm-3">
                                    <button type="button" class="btn btn-primary" onclick="TestProcess('source')">
                                        测试加工
                                    </button>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-1 control-label">来源</div>
                                <div class="col-sm-1">
                                    <select class="control-form input-sm m-b-2" name="retweeted_source_select"
                                            id="retweeted_source_select">
                                        <option value="xpath">xpath</option>
                                        <option value="regex">re</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="表达式" class="form-control"
                                           name="retweeted_source_value" id="retweeted_source_value">
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="正则表达式" class="form-control"
                                           name="retweeted_source_re" id="retweeted_source_re">
                                </div>
                                <div class="col-sm-3">
                                    <button type="button" class="btn btn-primary"
                                            onclick="TestProcess('retweeted_source')">
                                        测试加工
                                    </button>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-1 control-label">来源链接</div>
                                <div class="col-sm-1">
                                    <select class="control-form input-sm m-b-2" name="retweeted_status_url_select"
                                            id="retweeted_status_url_select">
                                        <option value="xpath">xpath</option>
                                        <option value="regex">re</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="表达式" class="form-control"
                                           name="retweeted_status_url_value" id="retweeted_status_url_value">
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="正则表达式" class="form-control"
                                           name="retweeted_status_url_re" id="retweeted_status_url_re">
                                </div>
                                <div class="col-sm-3">
                                    <button type="button" class="btn btn-primary"
                                            onclick="TestProcess('retweeted_status_url')">
                                        测试加工
                                    </button>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-1 control-label">时间</div>
                                <div class="col-sm-1">
                                    <select class="control-form input-sm m-b-2" name="ctime_select"
                                            id="ctime_select">
                                        <option value="xpath">xpath</option>
                                        <option value="regex">re</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="表达式" class="form-control"
                                           name="ctime_value" id="ctime_value">
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="正则表达式" class="form-control"
                                           name="ctime_re" id="ctime_re">
                                </div>
                                <div class="col-sm-3">
                                    <button type="button" class="btn btn-primary" onclick="TestProcess('ctime')">
                                        测试加工
                                    </button>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-1 control-label">正文</div>
                                <div class="col-sm-1">
                                    <select class="control-form input-sm m-b-2" name="content_select"
                                            id="content_select">
                                        <option value="xpathall">xpathall</option>
                                        <option value="regexall">re</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="表达式" class="form-control"
                                           name="content_value" id="content_value">
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="正则表达式" class="form-control"
                                           name="content_re" id="content_re">
                                </div>
                                <div class="col-sm-3">
                                    <button type="button" class="btn btn-primary" onclick="TestProcess('content')">
                                        测试加工
                                    </button>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-1 control-label">图片链接</div>
                                <div class="col-sm-1">
                                    <select class="control-form input-sm m-b-2" name="pic_urls_select"
                                            id="pic_urls_select">
                                        <option value="xpathall">xpathall</option>
                                        <option value="regexall">re</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="表达式" class="form-control"
                                           name="pic_urls_value" id="pic_urls_value">
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="正则表达式" class="form-control"
                                           name="pic_urls_re" id="pic_urls_re">
                                </div>
                                <div class="col-sm-3">
                                    <button type="button" class="btn btn-primary" onclick="TestProcess('pic_urls')">
                                        测试加工
                                    </button>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-1 control-label">视频链接</div>
                                <div class="col-sm-1">
                                    <select class="control-form input-sm m-b-2" name="video_urls_select"
                                            id="video_urls_select">
                                        <option value="xpathall">xpathall</option>
                                        <option value="regexall">re</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="表达式" class="form-control"
                                           name="video_urls_value" id="video_urls_value">
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" placeholder="正则表达式" class="form-control"
                                           name="video_urls_re" id="video_urls_re">
                                </div>
                                <div class="col-sm-3">
                                    <button type="button" class="btn btn-primary" onclick="TestProcess('video_urls')">
                                        测试加工
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--                    <p class="btn btn-primary" onclick="addNode('parse')">Add</p>-->
                    <div class="form-group" name="next">
                        <div class="col-sm-6">
                            <!--                            <p style="display: none" id="config-flag"></p>-->
                            <!--                            <p style="display: none" id="entrance_url"></p>-->
                            <!--                            <p style="display: none" id="api_debug_url">/task/debugapi/</p>-->
                            <!--                            <p style="display: none" id="api_debug_result_url">/task/debug/result/</p>-->
                            <!--                            <p style="display: none" id="api_debug_kill_url">/task/debug/kill/</p>-->
                            <!--                            <label>代理</label>-->
                            <!--                            <input type="radio" name="proxy" value="0" class="debug-radio" checked="">不使用-->
                            <!--                            <input type="radio" name="proxy" value="1" class="debug-radio">使用-->
                            <!--                            <span style="margin-left: 10px"></span>-->
                            <!--                            <label>环境</label>-->
                            <!--                            <input type="radio" name="env" value="0" class="env-radio" checked="">国内-->
                            <!--                            <input type="radio" name="env" value="1" class="env-radio">国外-->
                            <button type="button" class="btn btn-primary" onclick="single_test()">测试</button>
                            <a class="btn btn-primary" href="{% url 'task:single_test' tid %}">生成代码</a>(下载后可修改,然后上传配置)
                            <!--                            <button type="button" class="btn btn-primary" onclick="config_test(1)">测试全部链接</button>-->
                        </div>
<!--                        <div class="col-sm-5">-->
<!--                            <a class="btn btn-primary btn-success pull-right"-->
<!--                               href="{% url 'task:visualization' %}?step=detail&tid={{ tid }}">下一步-->
<!--                            </a>-->
<!--                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<!--测试加工弹出框-->
<div class="modal fade" id="TestProcessResult" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" style="top:15px">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                测试结果：
            </div>
            <div id="TestProcessBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                <div class="form-group">
                    <div class="col-sm-2 control-label">原字符串</div>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" name="raw_field_value" id="raw_field_value" disabled>
                    </div>
                    <div class="col-sm-3">
                        <button type="button" class="btn btn-primary" onclick="addProcess('replace')">替换</button>
                        <button type="button" class="btn btn-primary" onclick="addProcess('split')">切割</button>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">加工后字符串</div>
                    <div class="col-sm-7">
                        <input type="text" placeholder="加工后字符串" class="form-control" name="after_field_value"
                               id="after_field_value" disabled>
                    </div>
                </div>
                <div class="form-group" id="ProcessBox"></div>
                <input type="hidden" id="last_rule_str" value="">
                <input type="hidden" id="processing_field" value="">
                <button type="button" class="btn btn-default" onclick="executeProc()">查看加工后结果</button>
            </div>
            <div class="modal-footer" style="text-align:center;">
                <button type="button" class="btn btn-default" onclick="save_rule()" data-dismiss="modal">确认</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<!--单测结果弹出框-->
<div class="modal fade" id="SingleTestResult" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" style="top:15px">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                测试结果： 正在下载。。。
            </div>
            <div id="SingleTestBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                <table class="table table-bordered table-hover table-striped" border="1">
                    <template v-for="head in headers">
                        <tr>
                            <td>[[head]]</td>
                            <td>[[ result_data[head] ]]</td>
                        </tr>
                    </template>
                </table>
            </div>
            <div class="modal-footer" style="text-align:center;">
                <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
{% endblock section_content %}
{% block jquery_js %}
<script src="{% static 'public/js/password.js' %}"></script>
<script>
    // 导航栏
    function changeColor(id, color) {
        $(id).parent().parent().addClass("active");
        $(id).children().css("color", color);
    }

    $('#myTasks').addClass("active");
    changeColor("#mine", "#00FF7F");
</script>

<script>
    // 测试、加工
    function TestProcess(field) {
        $('#raw_field_value').val('正在下载，请稍等。。。');
        $('#after_field_value').val('');
        $('#last_rule_str').val('');
        $('#ProcessBox').find('*').remove();
        $('#processing_field').val(field);
        $('#TestProcessResult').modal();
        var test_url = $('input[name="testURL_value"]').val();
        var resolver = $('#' + field + '_select option:selected').val();
        var experssion = $('#' + field + '_value').val();
        var regexps = $('#' + field + '_re').val();
        $.post({
            url: "{% url 'task:field_test' %}",
            data: {
                csrfmiddlewaretoken:'{{ csrf_token }}',
                tid: "{{ tid }}",
                test_url: test_url,
                field: field,
                resolver: resolver,
                experssion: experssion,
                regexps: regexps,
                proc: '',
                operate: 'test',
            },
            success: function (resp) {
                $('#raw_field_value').val(resp.field_value);
            }
        })
    }

    // 添加节点
    var num_item = 0;

    function addProcess(type) {
        if (type === 'replace') {
            var node = '<input type="hidden" class="form-control" name="means" value="replace">'
                + '<input type="text" placeholder="被替换的字符串" class="form-control" name="old_str">'
                + '<input type="text" placeholder="新字符串，用于替换old子字符串" class="form-control" name="new_str">'
                + '<button type="button" class="btn btn-default" onclick="removeNode(process_node' + num_item + ')">Del</button>';
        } else if (type === 'split') {
            var node = '<input type="hidden" class="form-control" name="means" value="split">'
                + '<input type="text" placeholder="分隔符" class="form-control" name="set">'
                + '<input type="number" placeholder="索引" class="form-control" name="index" value="0">'
                + '<button type="button" class="btn btn-default" onclick="removeNode(process_node' + num_item + ')">Del</button>';
        } else {
            alert('暂不支持此方法');
            return false
        }
        var parent = document.getElementById('ProcessBox');
        var div = document.createElement('div');
        div.id = "process_node" + num_item;
        div.innerHTML = node;
        parent.appendChild(div);
        num_item++
    }

    // 删除节点
    function removeNode(node) {
        node.remove();
    }

    // 执行加工
    function executeProc() {
        var proc_nodes = $('#ProcessBox').find('div');
        var raw_field_value = $('input[name="raw_field_value"]').val();
        var proc_str = '';
        for (var i = 0; i < proc_nodes.length; i++) {
            var means = $(proc_nodes[i]).find('input[name="means"]').val();
            if (means === 'replace') {
                var old_str = $(proc_nodes[i]).find('input[name="old_str"]').val();
                var new_str = $(proc_nodes[i]).find('input[name="new_str"]').val();
                raw_field_value = raw_field_value.replace(new RegExp(old_str, 'g'), new_str);
                proc_str += '.replace("' + old_str + '", "' + new_str + '")'
            } else if (means === 'split') {
                var set = $(proc_nodes[i]).find('input[name="set"]').val();
                var index = $(proc_nodes[i]).find('input[name="index"]').val();
                var index = Number(index);
                if (index < 0) {
                    var index = raw_field_value.split(set).length + index;
                }
                raw_field_value = raw_field_value.split(set)[index];
                proc_str += '.split("' + set + '")[' + index + ']'
            } else {
                alert('暂不支持此方法');
                return false
            }
        }
        $('input[name="after_field_value"]').val(raw_field_value);
        $('#last_rule_str').val(proc_str);
    }

    // 保存规则
    function save_rule() {
        var field = $('#processing_field').val();
        var resolver = $('#' + field + '_select option:selected').val();
        var experssion = $('#' + field + '_value').val();
        var regexps = $('#' + field + '_re').val();
        var proc = $('#last_rule_str').val();
        $.post({
            url: "{% url 'task:field_test' %}",
            data: {
                csrfmiddlewaretoken:'{{ csrf_token }}',
                tid: "{{ tid }}",
                test_url: '',
                field: field,
                resolver: resolver,
                experssion: experssion,
                regexps: regexps,
                proc: proc,
                operate: 'save',
            },
            success: function (resp) {
                alert(resp.message);
            }
        });
        $('#processing_field').val('');
        $('#after_field_value').val('');
        $('#last_rule_str').val('');
        $('#ProcessBox').find('*').remove();
    }

    function single_test() {
        $('#SingleTestResult').modal();
        var test_url = $('input[name="testURL_value"]').val();
        var params = 'tid=' + '{{ tid }}' + '&test_url=' + test_url;
        Vue.config.delimiters = ["[[", "]]"];
        var TestVue = new Vue({
            el: '#SingleTestBoxMsg',
            data: {
                result_data: '',
                headers: '',
            },
        });
        $.post(
            "{% url 'task:single_test' tid %}",
            {
                tid: "{{ tid }}",
                test_url: test_url,
                csrfmiddlewaretoken: "{{ csrf_token }}"
            },
            function (response) {
                TestVue.result_data = response.result_data;
                TestVue.headers = response.headers
            }
        )
    }
</script>
{% endblock jquery_js %}

